<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>导航栏示例</title>
  <!-- 引入 ElementUI 样式文件 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <!-- 侧导航栏 -->
  <el-aside style="height: 100%; width: 200px; float: left;">
    <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @select="handleSelect"
    >
      <el-menu-item index="1">页面一</el-menu-item>
      <el-menu-item index="2">页面二</el-menu-item>
      <el-menu-item index="3">页面三</el-menu-item>
    </el-menu>
  </el-aside>
  <!-- 右侧显示框 -->
  <el-container style="height: 100%">
    <el-main>
      <!-- 页面一 -->
      <el-card v-show="activeIndex === 1">
        <div class="card-body">
          <h2>页面一</h2>
          <p>这是页面一的内容。</p>
        </div>
      </el-card>
      <!-- 页面二 -->
      <el-card v-show="activeIndex === 2">
        <div class="card-body">
          <h2>页面二</h2>
          <p>这是页面二的内容。</p>
        </div>
      </el-card>
      <!-- 页面三 -->
      <el-card v-show="activeIndex === 3">
        <div class="card-body">
          <h2>页面三</h2>
          <p>这是页面三的内容。</p>
        </div>
      </el-card>
    </el-main>
  </el-container>
</div>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!-- 引入自定义 JavaScript 文件 -->
<script src="script.js"></script>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      activeIndex: 1
    },
    methods: {
      handleSelect(index) {
        this.activeIndex = index;
      }
    }
  });
</script>
</html>